<template>
  <div class="drawer-content">
    <el-form ref="dataForm" label-suffix="：" :label-width="`${conf.labelWidth + 20}px`">
      <el-form-item :label="conf.label" class="w-full px-1" :rules="rules">
        <select-tree class="tree" v-model="newValue" :data="conf.options" :disabled="conf.disabled" placeholder="请选择">
        </select-tree>
      </el-form-item>
      <!--      {element.required ? <span style="color:#F56C6C">*</span> : ''}-->
    </el-form>
  </div>
</template>

<script>
import SelectTree from '@/components/selectTree/index.vue';
import checkRules from "@/components/formcomponents/custom/rule";
export default {
  name: "fancySelectTree",
  components: {
    SelectTree
  },
  props: {
    conf: Object,
    value: {
      type: [String, Number],
      default: ''
    },
  },
  data () {
    return {
      id: '',
      rules: checkRules(this.conf),
      newValue: this.value
    }
  },
  watch: {
    'newValue': {
      handler (val) {
        this.$emit('input', val)
      }
    }
  },
  mounted () {
    this.id = this.conf.id;
  },
}
</script>

<style scoped></style>
